<template>
    <el-aside width="200px">
        <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                router
                :default-openeds="opens"
                :unique-opened="true"
                @open="handleOpen"
                @close="handleClose">
            <template v-for="(menu,index) in menus">
                <el-submenu index="0" :key="index">
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        <span>{{menu.name}}</span>
                    </template>
                    <template v-for="(child,i) in menu.children">
                        <el-menu-item :index="child.route" :key="index+'-'+i">
                            <i :class="child.icon"></i>{{child.name}}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </el-aside>
</template>

<script>
    import menus from '../../api/menu'

    export default {
        name: "Left",
        data() {
            return {
                opens: ['0'],
                menus: menus
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-aside {
        width: 205px !important;
        position: absolute;
        left: 0;
        bottom: 0;
        top: 60px;
        border-right: 1px solid #e6e6e6;
        box-shadow: 5px 0px 5px -2px #e0e0e0;
    }

    .el-submenu {
        border-bottom: 1px solid #e0e0e0;
    }
</style>